<template>
  <view class="contrastOcr">
    <movable-area
      v-if="movable.width"
      :style="{ width: SystemInfo.windowWidth + 'px', height: SystemInfo.windowHeight + 'px' }"
      class="movable-area"
    >
      <movable-view
        :scale-value="0.5"
        :style="{ width: movable.width + 'px', height: movable.height + 'px' }"
        :x="x"
        :y="y"
        direction="all"
        scale
      >
        <image :src="params.auditorFileUrl" style="width: 100%; height: 100%"></image>
        <view
          :style="{ width: movable.width + 'px', height: movable.height + 'px' }"
          class="rectWarp"
        >
          <view
            v-for="(item, index) in params.auditorDifferences"
            :key="index"
            :style="{
              left: item.compareRow.x + 'px',
              top: item.compareRow.y + 'px',
              width: item.compareRow.rectWidth + 'px',
              height: item.compareRow.rectHeight + 'px'
            }"
            class="rectsItem"
            @click="clickinfo(item)"
          ></view>
        </view>
      </movable-view>
    </movable-area>
    <u-popup v-model="popup.show" mode="bottom">
      <view v-if="popup.data" style="padding: 10px 0; box-sizing: border-box">
        <u-cell-group :border="false">
          <u-cell-item :arrow="false" :border-bottom="false" :title="$t('总相似度')">
            <view slot="right-icon">
              <u-tag
                :text="params.ocrRatio ? Number(params.ocrRatio * 100).toFixed(2) + '%' : '0'"
                :type="computedOcrRatio(params.ocrRatio)"
                size="mini"
              ></u-tag>
            </view>
          </u-cell-item>
          <u-cell-item :arrow="false" :border-bottom="false" :title="$t('本行相似度')">
            <view slot="right-icon">
              <u-tag
                :text="
                  popup.data.compareRow.similar
                    ? Number(popup.data.compareRow.similar * 100).toFixed(2) + '%'
                    : '0'
                "
                :type="computedOcrRatio(popup.data.compareRow.similar)"
                size="mini"
              ></u-tag>
            </view>
          </u-cell-item>
          <u-divider color="#007AFF">{{$t('本行原文本')}}</u-divider>
          <u-cell-item
            v-if="popup.data.srcRow"
            :arrow="false"
            :border-bottom="false"
            :value="popup.data.srcRow.text"
          ></u-cell-item>
          <teleport v-else>
            <u-cell-item :arrow="false" :border-bottom="false">
              <view slot="right-icon">
                <u-tag size="mini" :text="`${$t('警告')}:${$t('未匹配到行(错位)')}`" type="error"></u-tag>
              </view>
            </u-cell-item>
          </teleport>
          <u-divider color="#007AFF">{{$t('OCR识别文本')}}</u-divider>
          <u-cell-item
            :arrow="false"
            :border-bottom="false"
            :value="popup.data.compareRow.text"
          ></u-cell-item>
        </u-cell-group>
      </view>
    </u-popup>
  </view>
</template>
<script>
import { mapGetters, mapMutations } from 'vuex'

export default {
  computed: {
    ...mapGetters(['userInfo', 'api']),
    computedOcrRatio() {
      return (ocrRatio) => {
        if (ocrRatio >= 0.85) {
          return 'success'
        } else if (ocrRatio >= 0.75) {
          return 'warning'
        } else if (ocrRatio >= 0.65) {
          return 'info'
        } else {
          return 'error'
        }
      }
    }
  },
  data() {
    return {
      params: {},
      x: 0,
      y: 0,
      movable: {
        width: 0,
        height: 0
      },
      popup: {
        show: false,
        data: null
      }
    }
  },
  onLoad(op) {
    uni.setNavigationBarTitle({title: this.$t('相似度详情')})
    try {
      that.params = JSON.parse(decodeURIComponent(op.data))
    } catch (e) {
      that.params = JSON.parse(op.data)
    }
    that.SystemInfo = uni.getSystemInfoSync()
    //计算过滤出相似度小于1的
    that.Similarity()
    //下载图片
    that.downloadFile()
  },
  methods: {
    //计算过滤出相似度小于1的，并且处理下数据
    Similarity() {
      let data = JSON.parse(that.params.auditorDifferences)
      that.params.auditorDifferences = data.filter((item) => {
        if (item.compareRow && item.compareRow.similar < 1) {
          item.compareRow.x = item.compareRow.rects[0].x
          item.compareRow.y = item.compareRow.rects[0].y
          item.compareRow.rectWidth = item.compareRow.rects[1].x - item.compareRow.rects[0].x
          item.compareRow.rectHeight = item.compareRow.rects[2].y - item.compareRow.rects[0].y
          return item
        }
      })
    },
    //下载图片
    downloadFile() {
      uni.downloadFile({
        url: that.params.auditorFileUrl,
        success: function (res) {
          var filePath = res.tempFilePath
          uni.getImageInfo({
            src: filePath,
            success: function (image) {
              that.movable.width = image.width
              that.movable.height = image.height
            }
          })
        }
      })
    },
    //点击事件
    clickinfo(data) {
      that.popup.show = true
      that.popup.data = data
    }
  }
}
</script>

<style lang="scss" scoped>
.contrastOcr {
  .movable-area {
    .rectWarp {
      position: absolute;
      left: 0;
      top: 0;

      .rectsItem {
        position: absolute;
        background-color: red;
        opacity: 0.2;
      }
    }
  }
}
</style>
